<template>
	<view class="pageContent">
		<view class="remote">
			<view class="remoteMain" @click="doorListCli(index)" v-for="(item,index) in doorList" :key="index">
				<image class="remoteBac" v-show="doorIndex==index" :src="images +'/selectGate.png'" />
				<image class="remoteIco" :src="localImages +'/damen.png'" />
				<view class="remoteGate" :class="item.faceSync>0 ? 'hasText': '' ">{{item.gatePostName || '悦江苑 东门'}}
				</view>
				<view class="remoteName">{{item.equipmentName || '设备名称'}}</view>
				<!-- <view class="remoteStaTex"  v-if="index==5">待审核</view> -->
				<!-- <image class="remoteStaIco" v-if="index==4" :src="images +'/faceSyn0.png'"/> -->
				<view class="remoteStaTex" v-if="item.faceSync==1">待审核</view>
				<image class="remoteStaIco" v-if="item.faceSync==2" :src="images +'/faceSyn0.png'" />
				<image class="remoteStaIco" v-if="item.faceSync==3" :src="images +'/faceSyn3.png'" />
				<image class="remoteSel" v-if="doorIndex==index" :src="localImages +'/doorSelect.png'" />
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				doorList: [],
				room: '',
				item: '',
			}
		},

		onLoad(options) {
			var room = wx.getStorageSync('room');
			// var room = {
			// "ownerId": 32,
			// "projectId": 1,
			// "roomId": 3,
			// }
			if (options.json) {
				console.warn('options.json', options.json)
				var item = JSON.parse(options.json)
				room = item;
				var title = "门禁权限";
			} else {
				var title = "审核结果";
			}
			wx.setNavigationBarTitle({
				title: title
			})
			//切换登录时候，延迟调用查询接口
			setTimeout(() => {
				this.ownerGatepostList(room);
			}, 300)

		},

		methods: {
			async ownerGatepostList(room) {
				var url = '/UserServer/owner/info/ownerGatepostList'
				var phoneNumber = wx.getStorageSync('phone');
				//获取业主该手机号绑定的房屋列表
				var params = {
					ownerId: room.ownerId,
					projectId: room.projectId,
					roomId: room.roomId,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				param.map((item) => {
					item.faceSync = parseInt(item.faceSync)
				})
				this.doorList = param;
			},

		},

	}
</script>

<style scoped>
	.pageContent {
		min-height: 100vh;
		padding: 0rpx 0rpx 0rpx 0rpx;
		background: #F3F6F9;
	}

	.remote {
		padding: 20rpx 30rpx 20rpx 30rpx;
	}

	.remoteMain {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
		width: 100%;
		height: 120rpx;
		border-radius: 10rpx;
		padding: 0rpx 20rpx 0rpx 116rpx;
		background: #FFFFFF;
		/* border 1px solid #666 */
		margin-bottom: 20rpx;
		z-index: 0;
	}

	.remoteIco {
		position: absolute;
		top: 50%;
		left: 40rpx;
		margin-top: -25rpx;
		width: 56rpx;
		height: 46rpx;
		background: #84D7FF;
		/* border 1px solid #84D7FF */
	}

	.remoteStaTex {
		position: absolute;
		top: 50%;
		right: 30rpx;
		margin-top: -25rpx;
		color: #FF8080;
	}

	.remoteStaIco {
		position: absolute;
		top: 50%;
		right: 40rpx;
		margin-top: -25rpx;
		width: 46rpx;
		height: 46rpx;
		/* border 1px solid #84D7FF */
	}

	.remoteSel {
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
		width: 56rpx;
		height: 36rpx;
		/* border 1px solid #84D7FF */
	}

	.remoteGate {
		font-size: 30rpx;
		color: #030303;
		line-height: 42rpx;
	}

	.remoteGate.hasText {
		padding-right: 80rpx;
	}

	.remoteName {
		font-size: 26rpx;
		color: #92A7B3;
	}

	.remoteBac {
		position: absolute;
		width: 100%;
		width: 100%;
		top: 0rpx;
		left: 0rpx;
		z-index: -1;
	}
</style>
